<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
生命周期钩子函数

-->

<body>
    <div id="app">
        <h1>计数器</h1>
        <button @click="num--">-</button><span>{{num}}</span><button @click="num++">+</button>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            // 创建前
            beforeCreate() {
                console.log("将普通数据转换为响应式数据前")
                console.log("测试访问响应式数据", this.num)

            },
            // 创建
            created() {
                console.log("将普通数据转换为响应式数据完成");
                console.log("测试访问响应式数据", this.num);
            },
            // 挂载前
            beforeMount() {
                console.log("渲染模板前", document.querySelector("span").innerHTML); // 挂载前数据渲染不出来
            },
            // 挂载后
            mounted() {
                console.log("渲染模板后", document.querySelector("span").innerHTML); // 挂载后数据可以渲染出来
            },
            // 视图更新前
            beforeUpdate() {
                console.log("数据已经修改了，视图还没有更新", document.querySelector("span").innerHTML);
            },
            // 视图更新后
            updated() {
                console.log("数据修改了，视图已经更新", this.num)
            },
            beforeDestroy() {
                console.log("卸载前", this.num)
            },
            destroyed() {
                console.log("卸载后", this.num)
            },
            data: {
                num: 100
            }
        })
    </script>

</body>

</html>